<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>考勤系统 - 考勤记录</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#4080FF',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#86909C',
            light: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 hover:bg-primary/10;
      }
      .sidebar-item.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 p-5 transition-all duration-300 hover:shadow-md;
      }
      .btn {
        @apply px-4 py-2 rounded-lg transition-all duration-200 font-medium;
      }
      .btn-primary {
        @apply bg-primary text-white hover:bg-primary/90 active:bg-primary/80;
      }
      .btn-outline {
        @apply border border-gray-200 hover:bg-gray-50 active:bg-gray-100;
      }
      .btn-success {
        @apply bg-success text-white hover:bg-success/90 active:bg-success/80;
      }
      .btn-danger {
        @apply bg-danger text-white hover:bg-danger/90 active:bg-danger/80;
      }
      .form-input {
        @apply w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
      }
      .attendance-status {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
      }
      .attendance-status-normal {
        @apply bg-success/10 text-success;
      }
      .attendance-status-late {
        @apply bg-warning/10 text-warning;
      }
      .attendance-status-absent {
        @apply bg-danger/10 text-danger;
      }
      .attendance-status-leave {
        @apply bg-info/10 text-info;
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <div class="flex items-center">
          <div class="text-primary text-2xl font-bold mr-2">
            <i class="fa fa-calendar-check-o"></i>
          </div>
          <span class="text-xl font-bold">考勤系统</span>
        </div>
        
        <!-- 搜索框 -->
        <div class="hidden md:block flex-1 max-w-md mx-8">
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fa fa-search text-gray-400"></i>
            </span>
            <input type="text" class="form-input pl-10" placeholder="搜索员工、部门或考勤记录...">
          </div>
        </div>
        
        <!-- 用户菜单 -->
        <div class="flex items-center gap-4">
          <button class="btn-outline rounded-full p-2 relative">
            <i class="fa fa-bell-o"></i>
            <span class="absolute top-1 right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
          </button>
          
          <div class="relative group">
            <button class="flex items-center gap-2">
              <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="h-8 w-8 rounded-full object-cover">
              <span class="hidden md:inline font-medium">管理员</span>
              <i class="fa fa-angle-down text-gray-400"></i>
            </button>
            
            <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
              <div class="py-2">
                <a href="#" class="block px-4 py-2 hover:bg-gray-50">
                  <i class="fa fa-user-o mr-2"></i>个人资料
                </a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-50">
                  <i class="fa fa-cog mr-2"></i>设置
                </a>
                <div class="border-t border-gray-100 my-1"></div>
                <a href="#" class="block px-4 py-2 hover:bg-gray-50 text-danger">
                  <i class="fa fa-sign-out mr-2"></i>退出登录
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block">
      <div class="py-6 px-2">
        <nav class="space-y-1">
          <a href="#" class="sidebar-item">
            <i class="fa fa-home"></i>
            <span>首页</span>
          </a>
          <a href="#" class="sidebar-item">
            <i class="fa fa-user-o"></i>
            <span>员工管理</span>
          </a>
          <a href="#" class="sidebar-item active">
            <i class="fa fa-calendar"></i>
            <span>考勤记录</span>
          </a>
          <a href="#" class="sidebar-item">
            <i class="fa fa-bar-chart"></i>
            <span>统计报表</span>
          </a>
          <a href="#" class="sidebar-item">
            <i class="fa fa-clock-o"></i>
            <span>排班管理</span>
          </a>
          <a href="#" class="sidebar-item">
            <i class="fa fa-paper-plane-o"></i>
            <span>请假申请</span>
          </a>
          <a href="#" class="sidebar-item">
            <i class="fa fa-cog"></i>
            <span>系统设置</span>
          </a>
        </nav>
      </div>
    </aside>

    <!-- 移动端菜单按钮 -->
    <button class="md:hidden fixed bottom-4 right-4 bg-primary text-white p-3 rounded-full shadow-lg z-40">
      <i class="fa fa-bars"></i>
    </button>

    <!-- 主内容区 -->
    <main class="flex-1 overflow-y-auto p-4 md:p-6">
      <div class="max-w-7xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">考勤记录</h1>
          <p class="text-gray-500 mt-1">查看和管理所有员工的考勤记录</p>
        </div>

        <!-- 筛选条件 -->
        <div class="card mb-8">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">员工</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fa fa-user-o text-gray-400"></i>
                </span>
                <select class="form-input pl-10">
                  <option value="">全部员工</option>
                  <option value="1">张三 (EMP001)</option>
                  <option value="2">李四 (EMP002)</option>
                  <option value="3">王五 (EMP003)</option>
                  <option value="4">赵六 (EMP004)</option>
                  <option value="5">钱七 (EMP005)</option>
                </select>
              </div>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fa fa-sitemap text-gray-400"></i>
                </span>
                <select class="form-input pl-10">
                  <option value="">全部部门</option>
                  <option value="1">技术部</option>
                  <option value="2">市场部</option>
                  <option value="3">人力资源部</option>
                  <option value="4">财务部</option>
                  <option value="5">销售部</option>
                </select>
              </div>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-1">日期范围</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                  <i class="fa fa-calendar text-gray-400"></i>
                </span>
                <input type="month" class="form-input pl-10" value="2025-06">
              </div>
            </div>
            
            <div class="flex items-end">
              <button class="btn btn-primary w-full">
                <i class="fa fa-filter mr-2"></i>筛选
              </button>
              <button class="btn btn-outline ml-2">
                <i class="fa fa-download mr-2"></i>导出
              </button>
            </div>
          </div>
        </div>

        <!-- 考勤记录表格 -->
        <div class="card mb-8">
          <div class="flex justify-between items-center mb-6">
            <h3 class="font-semibold text-lg">考勤记录列表</h3>
            <div class="flex space-x-2">
              <button class="btn btn-outline text-sm px-3 py-1">日视图</button>
              <button class="btn btn-primary text-sm px-3 py-1">月视图</button>
            </div>
          </div>
          
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">员工</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">应出勤天数</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际出勤</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">迟到次数</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">早退次数</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">旷工天数</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">请假天数</th>
                  <th class="px-4 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/1005/40/40" alt="员工头像">
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">张三</div>
                        <div class="text-xs text-gray-500">EMP001</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">技术部</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-success h-2 rounded-full" style="width: 95%"></div>
                      </div>
                      <span class="text-sm font-medium text-gray-900">21/22</span>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-primary">
                    <button class="text-primary hover:text-primary/80">
                      <i class="fa fa-eye mr-1"></i>详情
                    </button>
                  </td>
                </tr>
                <tr>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/1000/40/40" alt="员工头像">
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">李四</div>
                        <div class="text-xs text-gray-500">EMP002</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">技术部</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-success h-2 rounded-full" style="width: 91%"></div>
                      </div>
                      <span class="text-sm font-medium text-gray-900">20/22</span>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-primary">
                    <button class="text-primary hover:text-primary/80">
                      <i class="fa fa-eye mr-1"></i>详情
                    </button>
                  </td>
                </tr>
                <tr>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/1012/40/40" alt="员工头像">
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">王五</div>
                        <div class="text-xs text-gray-500">EMP003</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">市场部</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-warning h-2 rounded-full" style="width: 73%"></div>
                      </div>
                      <span class="text-sm font-medium text-gray-900">16/22</span>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-primary">
                    <button class="text-primary hover:text-primary/80">
                      <i class="fa fa-eye mr-1"></i>详情
                    </button>
                  </td>
                </tr>
                <tr>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/1027/40/40" alt="员工头像">
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">赵六</div>
                        <div class="text-xs text-gray-500">EMP004</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">人力资源部</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-success h-2 rounded-full" style="width: 100%"></div>
                      </div>
                      <span class="text-sm font-medium text-gray-900">22/22</span>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-primary">
                    <button class="text-primary hover:text-primary/80">
                      <i class="fa fa-eye mr-1"></i>详情
                    </button>
                  </td>
                </tr>
                <tr>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/1025/40/40" alt="员工头像">
                      <div class="ml-3">
                        <div class="text-sm font-medium text-gray-900">钱七</div>
                        <div class="text-xs text-gray-500">EMP005</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">财务部</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
                  <td class="px-4 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="w-full bg-gray-200 rounded-full h-2 mr-2">
                        <div class="bg-success h-2 rounded-full" style="width: 95%"></div>
                      </div>
                      <span class="text-sm font-medium text-gray-900">21/22</span>
                    </div>
                  </td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">0</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
                  <td class="px-4 py-4 whitespace-nowrap text-sm text-primary">
                    <button class="text-primary hover:text-primary/80">
                      <i class="fa fa-eye mr-1"></i>详情
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 分页 -->
          <div class="flex justify-between items-center mt-6">
            <div class="text-sm text-gray-500">
              显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">128</span> 条
            </div>
            <div class="flex space-x-1">
              <button class="btn btn-outline px-3 py-1">上一页</button>
              <button class="btn btn-primary px-3 py-1">1</button>
              <button class="btn btn-outline px-3 py-1">2</button>
              <button class="btn btn-outline px-3 py-1">3</button>
              <button class="btn btn-outline px-3 py-1">...</button>
              <button class="btn btn-outline px-3 py-1">26</button>
              <button class="btn btn-outline px-3 py-1">下一页</button>
            </div>
          </div>
        </div>

        <!-- 月度考勤日历 -->
        <div class="card mb-8">
          <div class="flex justify-between items-center mb-6">
            <h3 class="font-semibold text-lg">月度考勤日历</h3>
            <div class="flex space-x-2">
              <button class="btn btn-outline text-sm px-3 py-1">
                <i class="fa fa-angle-left"></i>
              </button>
              <button class="btn btn-primary text-sm px-3 py-1">2025年6月</button>
              <button class="btn btn-outline text-sm px-3 py-1">
                <i class="fa fa-angle-right"></i>
              </button>
            </div>
          </div>
          
          <div class="grid grid-cols-7 gap-2">
            <!-- 星期标题 -->
            <div class="text-center py-2 font-medium text-gray-500">周一</div>
            <div class="text-center py-2 font-medium text-gray-500">周二</div>
            <div class="text-center py-2 font-medium text-gray-500">周三</div>
            <div class="text-center py-2 font-medium text-gray-500">周四</div>
            <div class="text-center py-2 font-medium text-gray-500">周五</div>
            <div class="text-center py-2 font-medium text-gray-500 text-gray-400">周六</div>
            <div class="text-center py-2 font-medium text-gray-500 text-gray-400">周日</div>
            
            <!-- 日期 - 第一周 -->
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">27</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">28</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">29</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">30</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">31</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">1</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">2</div>
            </div>
            
            <!-- 日期 - 第二周 -->
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">3</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:30 - 17:30</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">4</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:45 - 17:45</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">5</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-late mt-1">
                  <i class="fa fa-exclamation-circle mr-1"></i>迟到
                </div>
                <div class="mt-1">09:10 - 18:00</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">6</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:25 - 17:30</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">7</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-leave mt-1">
                  <i class="fa fa-calendar-times-o mr-1"></i>病假
                </div>
                <div class="mt-1">全天</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">8</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">9</div>
            </div>
            
            <!-- 日期 - 第三周 -->
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">10</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:35 - 17:45</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">11</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-late mt-1">
                  <i class="fa fa-exclamation-circle mr-1"></i>迟到
                </div>
                <div class="mt-1">09:20 - 18:00</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">12</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:40 - 17:50</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">13</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:30 - 17:30</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">14</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:45 - 17:45</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">15</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">16</div>
            </div>
            
            <!-- 日期 - 第四周 -->
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">17</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:35 - 17:45</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">18</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-late mt-1">
                  <i class="fa fa-exclamation-circle mr-1"></i>迟到
                </div>
                <div class="mt-1">09:10 - 18:00</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">19</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:45 - 17:55</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32 border-2 border-primary bg-primary/5">
              <div class="text-sm font-medium text-primary">20</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </div>
                <div class="mt-1">08:45 - 未打卡</div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32">
              <div class="text-sm font-medium">21</div>
              <div class="mt-1 text-xs text-gray-500">
                <div class="attendance-status attendance-status-normal mt-1">
                  <i class="fa fa-clock-o mr-1"></i>待打卡
                </div>
              </div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">22</div>
            </div>
            <div class="border rounded-lg p-2 h-32 bg-gray-50">
              <div class="text-sm font-medium text-gray-400">23</div>
            </div>
            
            <!-- 图例 -->
            <div class="col-span-7 mt-4 flex flex-wrap gap-4">
              <div class="flex items-center">
                <span class="attendance-status attendance-status-normal">
                  <i class="fa fa-check-circle mr-1"></i>正常
                </span>
              </div>
              <div class="flex items-center">
                <span class="attendance-status attendance-status-late">
                  <i class="fa fa-exclamation-circle mr-1"></i>迟到
                </span>
              </div>
              <div class="flex items-center">
                <span class="attendance-status attendance-status-absent">
                  <i class="fa fa-times-circle mr-1"></i>旷工
                </span>
              </div>
              <div class="flex items-center">
                <span class="attendance-status attendance-status-leave">
                  <i class="fa fa-calendar-times-o mr-1"></i>请假
                </span>
              </div>
              <div class="flex items-center">
                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">
                  <i class="fa fa-clock-o mr-1"></i>待打卡
                </span>
              </div>
              <div class="flex items-center">
                <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-400">
                  休息日
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 考勤趋势图表 -->
        <div class="card">
          <div class="flex justify-between items-center mb-6">
            <h3 class="font-semibold text-lg">部门考勤趋势</h3>
            <div class="flex space-x-2">
              <button class="btn btn-outline text-sm px-3 py-1">周</button>
              <button class="btn btn-primary text-sm px-3 py-1">月</button>
              <button class="btn btn-outline text-sm px-3 py-1">年</button>
            </div>
          </div>
          <div class="h-80">
            <canvas id="departmentAttendanceChart"></canvas>
          </div>
        </div>
      </div>
    </main>
  </div>

  <footer class="bg-white border-t border-gray-200 py-4">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-center md:text-left mb-4 md:mb-0">
          <p class="text-sm text-gray-500">© 2025 考勤系统. 保留所有权利.</p>
        </div>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-question-circle"></i> 帮助中心
          </a>
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-file-text-o"></i> 使用条款
          </a>
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-shield"></i> 隐私政策
          </a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 设置当前日期